<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>开通会员</p>
		</header>

		<!-- 内容部分 -->
		<div class="content">
			<h2>可选择的会员</h2>
			<div class="membership-card">
				<img src="../assets/vip.jpg" alt="会员卡图片" class="vip-image">
			</div>
			<p>享<span class="red-text">95</span>折优惠，首月仅需<span class="red-text">￥9.9</span></p>
			<div class="select-option">
				<label for="membership-checkbox">是否选择：</label>
				<input type="checkbox" id="membership-checkbox" name="membership-selection">
			</div>
		</div>

		<!-- 确认购买中心按钮 -->
		<button class="return-button" @click="toPayDone">确认购买</button>
	</div>
</template>

<script>
	export default {
		name:'openVip',
		data(){
			return{
				user:{}
			}
		},
		created(){
			this.user = this.$getSessionStorage('user');
		},
		methods:{
			toPayDone(){
				let url = `/UserController/getMember/${this.user.token.token}/30`
				this.$axios.put(url)
				.then(response =>{
					if(response.data.result !== null || response.data.result !== ''){
						alert('开通会员成功！');
						this.$router.push({path:'/payDone',query:{orderTotal: 9.9, isMember: true}});
					}
					else{
						alert('开通会员失败，请重试！')
					}		

				})
				.catch(error => {
					console.error(error);
				});
			}
		}
	}
</script>

<style scoped>
	.wrapper {
		height: 100%;
		width: 100%;
	}

	/*********header部分********/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 新内容部分 */
	.content {
		text-align: center;
		margin-top: 60px;
		/* 调整垂直间距 */
	}

	h2 {
		font-size: 24px;
		/* 调整标题字体大小 */
	}

	.membership-card {
		text-align: center;
		margin-top: 20px;
		border-radius: 10px;
		/* 添加圆角 */
		overflow: hidden;
		/* 裁剪图片以适应圆角 */
	}

	.vip-image {
		max-width: 95%;
		/* 缩小图片大小 */
		height: auto;
		margin: 20px auto;
		/* 添加左右边距 */
		border-radius: 10px;
		/* 添加圆角 */
	}

	p {
		font-size: 18px;
	}

	/* 标记文本为红色 */
	.red-text {
		color: red;
	}

	/* 选择项样式 */
	.select-option {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}

	label {
		font-size: 18px;
		margin-right: 10px;
	}

	input[type="checkbox"] {
		width: 24px;
		height: 24px;
	}

	/* 确认购买按钮样式 */
	.return-button {
		display: block;
		width: 80%;
		max-width: 300px;
		margin: 60px auto;
		padding: 10px 20px;
		background-color: #0097FF;
		color: #fff;
		font-size: 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.return-button:hover {
		background-color: #0077C0;
	}
</style>
